Cuando ejecuto el siguiente código, veo un comportamiento diferente en el entorno limitado que estoy usando. Cuando hago clic en el botón, aparece "Error de sintaxis no capturado: la declaración de función requiere un nombre" en la consola, pero aquí está representando el evento de clic como texto en el botón (¿no estoy seguro de por qué?)
La pregunta es: ¿hay alguna manera de pasar funciones como esta a elementos creados en literales de plantilla que se agregan al DOM usando innerHTML?
const clickHandler = () => { console.log("Hi"); }; const root = document.getElementById("root"); root.innerHTML = `<button onClick=${clickHandler}>Click</button>`; <!DOCTYPE html> <html> <body> <div id="root"></div> </body> </html>Los controladores en línea, al ser atributos, son esencialmente cadenas. Cuando tu lo hagas
<button onClick=${clickHandler}>la función se convierte en una cadena, lo que da como resultado:
<button onclick="()" ==""> { console.log("Hi"); }>Click</button>que no es lo que desea: la corrección automática de la sintaxis causada por la interpolación no funciona bien.
Cuando lo hace correctamente, la cadena en el atributo, cuando se evalúa como JavaScript, solo puede hacer referencia a variables globales (para todos los casos que vale la pena mencionar). Si bien puede hacer que su código funcione usando el nombre de la función y asegurándose de que la función sea global:
const clickHandler = () => { console.log("Hi"); }; const root = document.getElementById("root"); root.innerHTML = `<button onClick=clickHandler()>Click</button>`; <div id="root"></div> Un enfoque mucho mejor sería adjuntar el detector de eventos con JavaScript, en lugar de un atributo similar a eval con problemas de alcance. Inserte los elementos, luego navegue hasta el elemento al que desea adjuntar el oyente y use addEventListener .
const clickHandler = () => { console.log("Hi"); }; const root = document.getElementById("root"); root.innerHTML = `<button>Click</button>`; root.querySelector('button').addEventListener('click', clickHandler); <div id="root"></div>O use un marco diseñado para este tipo de cosas.
const App = () => { const clickHandler = () => { console.log("Hi"); }; return <button onClick={clickHandler}>Click</button>; }; ReactDOM.createRoot(document.querySelector('.root')).render(<App />); <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> <div class='root'></div>